import React, { Component } from 'react';
import logo from '../logo.svg'
import './List.scss'
import { index_nav } from '../utils/api'
class List extends Component {
    constructor(props){
        super(props);
        this.state = {
            arr:[]
        }
    }
    componentDidMount(){
        index_nav().then((res)=>{
            console.log(res.data);
            this.setState({
                arr : res.data.list
            })
            
          

        })
    }
    render(){
        return(
            <div className="list">
                {
                    //列表渲染，使用js的map函数
                    this.state.arr.map((item,index)=>{
                        return(
                            <div className='cate' key={index}>
                                <img src= {item.pic} alt="" />
                                <div className='name'>{item.name}</div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default List;